<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" @close="close">
    <el-form ref="form" label-width="160px" :model="form" :rules="rules">
      <!-- <div v-for="(item, index) in Object.keys(form)" :key="index"> -->
      <el-form-item
        v-for="(item, index) in Object.keys(form)"
        :key="index"
        :label="item"
        :prop="`${item}`"
        :rules="arrayRules"
      >
        <el-input
          v-if="!isAdd && item === '关键问题'"
          v-model.trim="form[item]"
          autocomplete="off"
          :disabled="true"
        />

        <el-input v-else v-model.trim="form[item]" autocomplete="off" />
      </el-form-item>
      <!-- </div> -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/configration'
  export default {
    name: 'TableEdit',
    data() {
      var validateName = (rule, value, callback) => {
        if (!value.trim()) {
          //当value中的值为空时,抛出错误并提示(阻拦)
          callback(new Error('名字不能为空'))
        } else {
          //当value值满足进行下一步(放行)
          callback()
        }
      }
      return {
        isAdd: false,
        currenIndex: undefined,
        form: {
          prizeid: '',
          name: '',
          count: 0,
          text: '',
          countDesc: '',
          continuous: '',
        },
        list: {},
        rules: {
          'product.id': [{ required: true }],
          'product.name': [{ required: true, trigger: 'blur', message: '请输入产品名称' }],
        },
        arrayRules: [{ required: true, trigger: 'blur', message: '请输入内容' }],
        title: '',
        dialogFormVisible: false,
        defaultContinuous: '',
      }
    },
    created() {},
    methods: {
      showEdit(list, row, index) {
        console.log('显示', list, row)
        if (!row) {
          this.title = '添加解决方案'
          this.isAdd = true
        } else {
          this.title = '编辑解决方案'
          this.form = Object.assign({}, row)
          this.isAdd = false
          this.currenIndex = index
          // console.log
          // this.defaultContinuous = this.from.continuous
        }
        this.list = list
        this.dialogFormVisible = true
      },
      close() {
        console.log('close----')
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$emit('fetch-data')
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          console.log('...valid..', valid)
          if (valid) {
            this.$forceUpdate()
            console.log(this.form, '....save.........', this.list)
            if (this.form && this.list && Array.isArray(this.list)) {
              if (this.currenIndex != undefined && typeof this.currenIndex === 'number') {
                this.list[this.currenIndex] = this.form
              } else {
                this.list.map((it) => {
                  if (it && typeof it === 'object' && it['关键问题'] === this.form['关键问题']) {
                    it = this.form
                  }
                })
              }
            }
            const props = {
              configValue: this.list,
              configItem: 'Solution',
            }
            let { data, error } = await doEdit(props).catch((err) => {
              this.$baseMessage('接口报错', 'error')
            })
            if (error) {
              this.$baseMessage(error || '接口报错', 'error')
            } else {
              this.$baseMessage('操作成功', 'success')
              this.close()

              // this.$emit('fetch-data')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
